<template>
	<view>
		<!-- <placeholder></placeholder> -->
		<view class="container">
			<view class="sign" @click="alreadyRead">标记已读</view>
		</view>
		<view class="mex-box" v-for="(item,index) in list" :key="index">
			<van-swipe-cell :right-width="65">
				<van-cell-group>
					<view class="mes-item" @click="msgById" :data-item="item" :data-index="index">
						<view class="flex-space">
							<view class="flex-align ">
								<image v-if="item.type" src="../../static/image/page/tixian-icon.png" class="order-icon"></image>
								<image v-else src="../../static/image/page/order-icon.png" class="order-icon"></image>
								<text class="type-text">{{item.type?'提现':'订单'}}</text>
							</view>
							<view class="flex-align ">
								<view class="Unread" v-if="!item.state"></view>
								<text class="time-text">{{item.updateTime}}</text>
							</view>
						</view>
						<view class="mes-text">{{item.note}}</view>
					</view>

				</van-cell-group>
				<view slot="right" class="del" @click="msmsgDelByIdgById" :data-id="item.id" :data-index="index">删除
				</view>
			</van-swipe-cell>
		</view>
		<!-- <no-data wx:if="{{isComplete}}"></no-data> -->
	</view>
</template>

<script>
 	export default {
		data() {
			return {
				isLoading: false,
				isComplete: false,
				list: [],
				pageNo: 1,
			}
		},
		onLoad: function(options) {
			this.getMessage();
		},
		methods: {
			//删除
			msmsgDelByIdgById(e) {
				let {
					id,
					index
				} = e.currentTarget.dataset;
				this.$api.msmsgDelByIdgById(id).then(res => {
					this.list.splice(index, 1);
					// console.log(lits)
					// this.list=lits;
				})
			},
			//单个标记已读
			msgById(e) {
				let {
					item,
					index
				} = e.currentTarget.dataset;
				if (!item.state) {
					this.$api.msgById(item.id).then(res => {
					this.list[index].state = 1;
						
					})
				}

			},
			//标记已读
			alreadyRead() {
				this.$api.alreadyRead().then(res => {
					
						this.isLoading= false;
						this.isComplete=false;
						this.list=[];
						this.pageNo=1;
					
					this.getMessage();
				})
			},

			//获取消息列表
			getMessage() {
			
					this.isLoading=true;
			this.$api.getMessage({
					pageNo: this.pageNo
				}).then(res => {
					let data = res.data.data.records.map(item => {
						item.scrollLeft = 0
						return item;
					})
					console.log(data)
						this.list= this.list.concat(data);
						this.isLoading= false;
						this.isComplete= !res.data.data.records.length,
						this.pageNo=++this.pageNo
				})
			},
		},
	}
</script>

<style scoped>
	.container {
	  padding: 0 30rpx;
	}
	
	.sign {
		margin-top: 20rpx;
	  text-align: right;
	  font-size: 26rpx;
	  margin-bottom: 30rpx;
	}
	
	
	
	.mex-box {
	  padding: 0 30rpx;
	  width: 100%;
	  height: 160rpx;
	  margin-bottom: 20rpx;
	}
	
	.mes-item {
	  width: 100%;
	  height: 160rpx;
	  background: #FFFFFF;
	  border-radius: 10rpx;
	  padding: 30rpx 22rpx 0 22rpx;
	}
	
	.order-icon {
	  width: 36rpx;
	  height: 36rpx;
	  margin-right: 16rpx;
	}
	
	.type-text {
	  font-size: 28rpx;
	  color: #666666;
	}
	
	.Unread {
	  width: 16rpx;
	  height: 16rpx;
	  background: #FC4073;
	  border-radius: 50%;
	  margin-right: 12rpx;
	}
	
	.time-text {
	  font-size: 22rpx;
	  color: #999999;
	}
	
	.mes-text {
	  font-size: 28rpx;
	  color: #333333;
	  margin-top: 32rpx;
	   display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 1;
	  overflow: hidden;
	}
	
	.del {
	  width: 130rpx;
	  height: 100%;
	  background: #FC4073;
	  font-size: 28rpx;
	  color: #FFFFFF;
	  text-align: center;
	  line-height: 160rpx;
	
	}
</style>
